<template>
  <div class="userinfo">
    <img src="../assets/avator.jpg" class="avator" />
    <n-popover trigger="click" :show="showPopover">
      <template #trigger>
        <div @click="showPopover = !showPopover" class="name">
          {{ userInfo.userName }}</div>
      </template>
      <span class="popname">{{ userInfo.userName }}<n-tag class="tag" style="margin-left: 10px;
    cursor: pointer;" size="small" type="info" @click="showPopover = false">
          关闭
        </n-tag></span>
    </n-popover>
    <div style="margin-top: 30px;display: flex;flex-direction: column;">
      <Icon name="message" size="40px" style="margin-top: 10px;" color="#fff"></Icon>
      <Icon name="message" size="40px" style="margin-top: 10px;" color="#3B82F6"></Icon>
      <Icon name="message" size="40px" style="margin-top: 10px;" color="#3B82F6"></Icon>
      <Icon name="message" size="40px" style="margin-top: 10px;" color="#3B82F6"></Icon>
    </div>
    <div @click="exit" class="exitbox">
      <Icon name="exit" size="24px" color="#ffffff"></Icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import Icon from '@/components/Icon.vue';
import { createDiscreteApi } from 'naive-ui'
import { ref } from 'vue'
import storage from '@/utils/storage';
const { dialog } = createDiscreteApi(
  ['message', 'dialog', 'notification', 'loadingBar', 'modal']
)
const emits = defineEmits(['exit'])
const showPopover = ref(false)
const userInfo = ref<any>({})
const init = () => {
  userInfo.value = storage.get('userinfo')
}
init()
const exit = async () => {
  dialog.info({
    title: '提示',
    content: '是否退出登录',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      emits('exit')
    },
  });
};
</script>

<style lang="scss" scoped>
.exitbox {
  position: absolute;
  bottom: 20px;
  width: 46px;
  height: 46px;
  background: #1778ff;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

}

.userinfo {
  width: 100%;
  height: 100%;
  background: #085ffa;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .name {
    width: 100%;
    margin-top: 6px;
    cursor: pointer;
    padding: 0 6px;
    box-sizing: border-box;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .avator {
    width: 80%;
    margin-top: 30px;
    border-radius: 5px;
  }

  .popname {
    display: flex;

    align-items: center;


  }
}
</style>
